<template>
	<div>
		<center>
			<h1 style="margin-right:4.1666%;">{{entry.companyChineseName}}</h1>
		</center>
		<div class="app-container">

			<div class="return-button">
				<a @click="goBack">&#8592; 返回</a>
			</div>

			<div class="dialogDiv1" ref="leftDiv">
				<el-form ref="form" :model="form">
					<el-row>
						<el-col :span="8" :offset="1">
							<el-form-item label="企业名称" prop="_z_name" label-width="100px">
								<el-input style="width:95%" v-model="form.z_name" placeholder="中文名称" :disabled=true />
							</el-form-item>
						</el-col>
						<el-col :span="8" :offset="3">
							<el-form-item label-width="100px">
								<el-input style="width:95%" v-model="form.e_name" placeholder="英文名称" :disabled=true />
							</el-form-item>
						</el-col>
					</el-row>

					<el-row>
						<el-col :span="8" :offset="1">
							<el-form-item label="组织机构代码" prop="_oid" label-width="100px">
								<el-input style="width:95%" v-model="form.organize_id" placeholder="请输入" :disabled=true />
							</el-form-item>
						</el-col>
						<el-col :span="8" :offset="3">
							<el-form-item label="邮政编码" prop="_zip_code" label-width="100px">
								<el-input style="width:95%" v-model="form.zip_code" placeholder="请输入" :disabled=true />
							</el-form-item>
						</el-col>
					</el-row>

					<el-row>
						<el-col :span="8" :offset="1">
							<el-form-item label="所属地区" prop="_region" label-width="100px">
								<el-input style="width:95%" v-model="form.region" placeholder="请输入" :disabled=true />
							</el-form-item>
						</el-col>
						<el-col :span="8" :offset="3">
							<el-form-item label="所属行业" prop="_hangye" label-width="100px">
								<el-input placeholder="请选择" v-model="form.hangye_value" :options="form.hangye_options"
											:disabled=true style="width:95%"></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row>
						<el-col :offset="1" :span="19">
							<el-form-item label="企业性质" prop="_xingzhi" label-width="100px">
								<el-input placeholder="请选择" v-model="form.xingzhi_value" :options="form.xingzhi_options"
											:disabled=true style="width:98%"></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row>
						<el-col :offset="1" :span="19">
							<el-form-item label="主要经营业务" prop="_business" label-width="100px">
								<el-input style="width:98%" v-model="form.business" placeholder="请输入" :disabled=true />
							</el-form-item>
						</el-col>
					</el-row>


					<el-row>
						<el-col :span="8" :offset="1">
							<el-form-item label="联系人" prop="_link_man" label-width="100px">
								<el-input style="width:95%" v-model="form.link_man" placeholder="请输入" :disabled=true />
							</el-form-item>
						</el-col>
						<el-col :span="8" :offset="3">
							<el-form-item label="联系电话" prop="_phone" label-width="100px">
								<el-input style="width:95%" v-model="form.phone" placeholder="请输入" :disabled=true />
							</el-form-item>
						</el-col>
					</el-row>

					<el-row>
						<el-col :offset="1" :span="19">
							<el-form-item label="联系地址" prop="_link_location" label-width="100px">
								<el-input style="width:98%" v-model="form.link_location" placeholder="请输入" :disabled=true />
							</el-form-item>
						</el-col>
					</el-row>

					<el-row>
						<el-col :span="8" :offset="1">
							<el-form-item label="传真" prop="_fax" label-width="100px">
								<el-input style="width:95%" v-model="form.fax" placeholder="请输入" :disabled=true />
							</el-form-item>
						</el-col>
						<el-col :span="8" :offset="3">
							<el-form-item label="Email" prop="_email" label-width="100px">
								<el-input style="width:95%" v-model="form.email" placeholder="请输入" :disabled=true />
							</el-form-item>
						</el-col>
					</el-row>

				</el-form>
			</div>
			<div class="dialogDiv2" v-bind:style="{height: leftDivHeight}">
                <el-timeline>
                    <el-timeline-item
                        v-for="(activity, index) in activities"
                        :key="index"
                        :icon="activity.icon"
                        :type="activity.type"
                        :color="activity.color"
                        size="large"
                    >
                        <p class="timeline-name">{{ activity.name }}</p>
                        <p class="timeline-content" v-if="activity.idea != ''">
                        <span>退回备注: </span><span class="timeline-content__idea">{{ activity.idea }}</span>
                        </p>
                        <p class="timeline-content">{{ activity.timestamp }}</p>
                    </el-timeline-item>
                </el-timeline>
            </div>
			
		</div>
	</div>
</template>

<script>

import store from "@/store";
import { getCompanyInfoHistory } from '@/api/common/queryHistory'

export default {
	created() {
		// 1. 在页面加载时获取数据库数据并填充form字段
		this.getData();
	},

	props: {
		entry: Object
	},

	data(){
		return {
			activities: [],
            leftDivHeight: '0px',
			companyID: 0,
			userId: store.getters.userId, // 当前企业的账号ID

			labelPosition: 'right',
			form: {
				z_name: null,
				e_name: null,
				organize_id: null,
				zip_code: null,
				region: null,

				hangye_value: [],
				hangye_options: [
					{
						value: '住宿和餐饮业',
						label: '住宿和餐饮业',
						children: [{
							value: '酒店',
							label: '酒店',
						}, {
							value: '餐饮',
							label: '餐饮',
						}
						]
					},
					{
						value: '房地产与建筑',
						label: '房地产与建筑',
						children: [{
							value: '地产中介',
							label: '地产中介',
						}, {
							value: '建材',
							label: '建材',
						}, {
							value: '建筑设计',
							label: '建筑设计',
						}
						]
					},
					{
						value: '生活服务',
						label: '生活服务',
						children: [{
							value: '娱乐休闲',
							label: '娱乐休闲',
						}, {
							value: '美容保健',
							label: '美容保健',
						}, {
							value: '运动健身',
							label: '运动健身',
						}, {
							value: '婚庆摄影',
							label: '婚庆摄影',
						}
						]
					},
					{
						value: '工业',
						label: '工业',
						children: [{
							value: '航空航天与国防',
							label: '航空航天与国防',
						}, {
							value: '建筑装饰电力设备',
							label: '建筑装饰电力设备',
						}, {
							value: '机械制造',
							label: '机械制造',
						}, {
							value: '环保',
							label: '环保',
						}, {
							value: '商业服务与用品',
							label: '商业服务与用品',
						}, {
							value: '交通运输',
							label: '交通运输',
						},
						]
					},
					{
						value: '信息技术',
						label: '信息技术',
						children: [{
							value: '计算机',
							label: '计算机',
						}, {
							value: '电子',
							label: '电子',
						}, {
							value: '半导体',
							label: '半导体',
						}
						]
					},
					{
						value: '原材料',
						label: '原材料',
						children: [{
							value: '化工有色金属',
							label: '化工有色金属',
						}, {
							value: '钢铁',
							label: '钢铁',
						}, {
							value: '非金属材料',
							label: '非金属材料',
						}, {
							value: '造纸与包装',
							label: '造纸与包装',
						}
						]
					},

					{
						value: '通信服务',
						label: '通信服务',
						children: [{
							value: '电信服务',
							label: '电信服务',
						}, {
							value: '通信设备及技术服务',
							label: '通信设备及技术服务',
						}, {
							value: '传媒',
							label: '传媒',
						}
						]
					},

				],

				xingzhi_value: [],
				xingzhi_options: [
					{
						value: '国有企业',
						label: '国有企业',
						children: [{
							value: '中央国有企业',
							label: '中央国有企业',
						}, {
							value: '地方国有企业',
							label: '地方国有企业',
						}, {
							value: '军工国有企业',
							label: '军工国有企业',
						}
						]
					},
					{
						value: '集体所有制企业',
						label: '集体所有制企业',
						children: [{
							value: '农村集体所有制企业',
							label: '农村集体所有制企业',
						}, {
							value: '城市集体所有制企业',
							label: '城市集体所有制企业',
						}, {
							value: '集体合作社',
							label: '集体合作社',
						}, {
							value: '医疗卫生集体所有制企业',
							label: '医疗卫生集体所有制企业',
						}
						]
					},
					{
						value: '私营企业',
						label: '私营企业',
						children: [{
							value: '个体工商户',
							label: '个体工商户',
						}, {
							value: '中小企业',
							label: '中小企业',
						}, {
							value: '创业企业',
							label: '创业企业',
						}, {
							value: '互联网企业',
							label: '互联网企业',
						}
						]
					},
				],

				business: null,
				link_man: null,
				phone: null,
				link_location: null,
				fax: null,
				email: null,

				hangye_value1: null,
				xingzhi_value1: null,
			},
		}	//return
	},

	methods: {
		goBack() {
			const newValues = {
				sList: true,
				sForm: false,
			};
			this.$emit('update-parameter', newValues); // 触发自定义事件
		},

		getData() {
			// console.log("entry:")
			// console.log(this.entry)
			this.companyID = this.entry.companyId
			this.form.z_name = this.entry.companyChineseName;
			this.form.e_name = this.entry.companyEnglishName;
			this.form.organize_id = this.entry.companyInstCode; // 获取companyInstCode
			this.form.zip_code = this.entry.companyPostcode;
			this.form.region = this.entry.companyLocation;
			if(!this.entry.companyIndustry) this.form.hangye_value = null;
			else this.form.hangye_value = (this.entry.companyIndustry).split('/');
			if(!this.entry.companyNature)this.form.xingzhi_value = null;
			else this.form.xingzhi_value = (this.entry.companyNature).split('/');
			this.form.business = this.entry.companyBusiness;
			this.form.link_man = this.entry.companyContacts;
			this.form.phone = this.entry.companyPhone;
			this.form.link_location = this.entry.companyAddress;
			this.form.fax = this.entry.companyFax;
			this.form.email = this.entry.companyEmail;

			this.activities = []
            getCompanyInfoHistory({companyId: this.companyID}).then(response => {
                // console.log(this.$refs.leftDiv.clientHeight )
                this.leftDivHeight = this.leftDivHeight = document.body.clientHeight * 0.7 + 'px'
                var histories = response.data
                var len = response.data.length
                for (var i = 0; i < len; ++i) {
                    var historyType = histories[i].historyType
                    this.activities.push({
                        name: historyType == 0 ? "企业提交备案信息" : historyType == 3 ? "省审核退回" : "省审核通过",
                        idea: histories[i].historyComment,
                        color: historyType == 0 ? "#4E97FF" : historyType == 3 ? "#dd0000" : "#00dd00",
                        timestamp: histories[i].historyDate,
                    })
                }
            })
		},
	}
}
</script>

<style scoped>
.line {
	text-align: center;
}

.short_input {
	width: 510px; /* 自定义宽度 */
}


.long_input {
	width: 900px; /* 自定义宽度 */
}


.centered-form {
	display: flex;
	justify-content: center;
	align-items: center;
	/* height: 100vh;*/
}

.centered-form2 {
	display: flex;
	justify-content: center;
	align-items: center;
	/* height: 100vh; */
}

.custom-button {
	width: 150px; /* Custom width for the buttons */
}

.return-button {
	position: absolute;
	top: 10px;
	left: 10px;
}

.return-button a {
	text-decoration: none;
	background-color: #0074d9;
	color: #fff;
	padding: 5px 10px;
	border-radius: 5px;
	font-weight: bold;
	text-align: center;
}

.return-button a:hover {
	background-color: #0056b3;
}

.el-input.is-disabled /deep/ .el-input__inner {
	color: #606266 !important;
}

.el-textarea.is-disabled /deep/ .el-textarea__inner {
	color: #606266 !important;
}

.dialogDiv1{
    width:85%;
    
    /* background:blue; */
    float:left;
}

.dialogDiv2{
    width:15%;
	border-left: 1px solid black;
    margin-left: 0;
    padding: 0;
    /* background:magenta; */
    float:right;
    display: block;
    overflow-y: scroll;
}
.dialogDiv2::-webkit-scrollbar {display:none}

</style>
